<template>
  <div class="layer-wrapper">
    <div class="left">
      <div class="left-title">
        数据目录
        <el-button
          type="primary"
          link
          @click="
            handleAddCatalog(
              { parentId: 'ae249afeac0a4c80b5793aef62f48697', type: '5' },
              '新增数据目录',
            )
          "
          ><el-icon> <CirclePlusFilled /> </el-icon
        ></el-button>
      </div>
      <div class="left-tree">
        <el-tree
          ref="layerTreeData"
          :data="treeData"
          node-key="pkid"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
          highlight-current
          @current-change="handleClickTree"
        >
          <template #default="{ node, data }">
            <div class="left-tree-item">
              <span
                ><el-icon class="file"> <Folder /> </el-icon
                >{{ data.catalogName }}</span
              >
              <span>
                <el-button
                  type="primary"
                  link
                  @click.stop="
                    handleAddCatalog(
                      { parentId: data.pkid, type: '5' },
                      '新增目录',
                    )
                  "
                  ><el-icon> <CirclePlus /> </el-icon
                ></el-button>
                <el-button
                  type="primary"
                  link
                  @click.stop="handleAddCatalog(data, '编辑目录')"
                  ><el-icon> <Edit /> </el-icon
                ></el-button>
                <el-button
                  link
                  type="danger"
                  @click.stop="handleDeleteTree(data)"
                  ><el-icon> <Delete /> </el-icon
                ></el-button>
              </span>
            </div>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="custom-table-list-wrapper">
      <div class="search" :class="{ active: toggleSearchStatus }">
        <div class="search-left" ref="searchFromRef">
          <el-form class="search-form" inline>
            <!-- <el-form-item label="服务类型">
              <el-select
                class="search-select"
                v-model="searchParams.type"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) of dict['yn']"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="服务状态">
              <el-select
                class="search-select"
                v-model="searchParams.status"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) of dict['yn']"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="关键词">
              <el-input
                class="search-input"
                v-model="searchParams.resourceName"
                placeholder="请输入服务名称"
                :suffix-icon="Search"
                clearable
              ></el-input>
            </el-form-item> -->
          </el-form>
          <a
            class="search-left-toggle"
            v-if="showToggle"
            @click="handleToggleSearch"
          >
            <svg-icon :name="toggleSearchStatus ? 'up' : 'down'" />
            {{ toggleSearchStatus ? '收起' : '展开' }}
          </a>
        </div>
        <div class="search-right">
          <el-button type="primary" @click="initTableList(1)"
            ><svg-icon name="search" size="14px" />搜索</el-button
          >
          <el-button @click="handleResetCustom"
            ><svg-icon name="reset" size="17px" />重置</el-button
          >
        </div>
      </div>
      <div class="content">
        <div class="content-operate">
          <el-button type="primary" @click="handleAddCustom"
            ><svg-icon name="add" size="15px" />新增服务</el-button
          >
        </div>
        <div class="content-table">
          <el-table class="custom-table" :data="tableData" v-loading="loading">
            <el-table-column type="index" label="序号" width="60px" />
            <el-table-column prop="name" label="服务名称" />
            <el-table-column prop="serviceType" label="服务类型">
              <template #default="scope">
                {{ getDictValue('tcfwlx', scope.row.serviceType) }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="code" label="服务编码" /> -->
            <el-table-column prop="serviceUrl" label="服务地址" />
            <el-table-column prop="orderIndex" label="显示排序" />
            <el-table-column prop="updateTime" label="更新时间" />
            <!-- <el-table-column prop="status" label="是否默认">
              <template #default="scope">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="scope.row.status"
                  @change="handleChangeStatus(scope.row)"
                />
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="160px">
              <template #default="scope">
                <el-button link type="primary" @click="handleDetail(scope.row)"
                  >详情</el-button
                >
                <el-button
                  link
                  type="primary"
                  @click="handleEdit(scope.row, '编辑服务')"
                  >编辑</el-button
                >
                <el-button link type="danger" @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- <div class="content-page">
          <el-pagination
            class="custom-pagination"
            :current-page="paginationParams.pageIndex"
            :page-size="paginationParams.pageSize"
            background
            :page-sizes="[10, 20, 30, 50]"
            layout="total, prev, pager, next, sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="initTableList"
          />
        </div> -->
      </div>
      <AddDialog ref="addRef" :detail="currentDetail" @close="handleClose" />
      <DetailDialog
        ref="detailRef"
        :detail="currentDetail"
        @close="handleClose"
      />
      <AddCatalog
        ref="addCatalogRef"
        :detail="currentTreeData"
        @close="handleClose1"
      />
    </div>
  </div>
</template>
<script setup>
import { nextTick, onMounted, ref } from 'vue'
import AddDialog from './add.vue'
import DetailDialog from './detail.vue'
import AddCatalog from './addCatalog.vue'
import {
  datacatalogDelete,
  getDatacatalog,
  getLayerList,
  layerDelete,
} from '@/api/manager/dataManage/layerManage.js'
import {
  CirclePlus,
  CirclePlusFilled,
  Delete,
  Edit,
  Folder,
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useTableList } from '@/hooks/useTableList'
import { useDict } from '@/hooks/useDict'

const { dict, getDictValue, getDictStyle } = useDict(['yn', 'tcfwlx'])
const searchParams = ref({
  catalogType: '5',
  resourceTypes: '6',
})
const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  loading,
  initTableList,
  handleSizeChange,
  handleReset,
  // handleDelete,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  searchFromRef,
} = useTableList(searchParams, getLayerList, layerDelete)

const layerTreeData = ref()
const treeData = ref([])
const treeActiveId = ref('')
const defaultProps = ref({
  children: 'children',
})
const initTreeData = async () => {
  const res = await getDatacatalog({ catalogType: 5 })
  treeData.value = res.data[0].children
  if (treeData.value.length > 0) {
    const currentKey = treeData.value[0].pkid
    nextTick(() => {
      if (layerTreeData.value) {
        layerTreeData.value.setCurrentKey(currentKey)
      }
    })
    handleClickTree(treeData.value[0])
  }
}
const handleClickTree = (row) => {
  searchParams.value.catalogId = row.pkid
  initTableList(1)
}

const handleResetCustom = () => {
  const params = {
    catalogType: '5',
    resourceTypes: '6',
    catalogId: searchParams.value.catalogId,
  }
  handleReset(params)
}
const handleAddCustom = () => {
  if (!searchParams.value.catalogId) {
    ElMessage.warning('请先创建目录')
    return
  }
  handleAdd('新增服务', { catalogId: searchParams.value.catalogId })
}
const handleDelete = (row) => {
  ElMessageBox.confirm('是否确定删除该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const params = { resourceId: row.pkid }
      const res = await layerDelete(params)
      if (res.success) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        initTableList(1)
      } else {
        ElMessage.error(res.message)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

const addCatalogRef = ref()
const currentTreeData = ref({})
const handleAddCatalog = (row, title) => {
  currentTreeData.value = { ...row }
  addCatalogRef.value.title = title
  addCatalogRef.value.dialogVisible = true
}
const handleClose1 = (isload = false) => {
  currentDetail.value = {}
  if (isload) {
    initTreeData()
  }
}
const handleDeleteTree = (row) => {
  ElMessageBox.confirm('是否确定删除该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const params = { pkid: row.pkid }
      const res = await datacatalogDelete(params)
      if (res.success) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        initTreeData()
      } else {
        ElMessage.error(res.message)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}
onMounted(() => {
  initTreeData()
})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/table.scss';

.layer-wrapper {
  width: 100%;
  height: 100%;
  display: flex;

  .left {
    width: 300px;
    height: 100%;
    margin-right: 20px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
    border-radius: 4px;
    box-sizing: border-box;
    padding: 20px 0;

    &-title {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      padding: 0 10px 0 30px;
      font-size: 14px;
      line-height: 14px;
      font-weight: 500;
      color: #151515;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      &::before {
        content: ' ';
        position: absolute;
        width: 4px;
        height: 16px;
        background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
        border-radius: 2px;
        top: 6px;
        left: 20px;
      }
    }

    &-tree {
      width: 100%;
      height: calc(100% - 40px);
      overflow-y: auto;

      &-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .file {
          margin-right: 5px;
          color: #4575ee;
        }

        .el-button {
          margin-left: 0px;

          &:last-child {
            margin-right: 10px;
          }
        }
      }
    }
  }

  .custom-table-list-wrapper {
    width: calc(100% - 320px);
  }
}
</style>
